<template>
	<view class="container">
		<scroll-view style="height:100vh;" scrollY="true">
			<view class="content">
				<view class="top-info" style="padding: 10rpx;margin-top: 10rpx;">
					<view class="top-left">
						<view v-if="isConnect" class="ble-txt active">
							<text @click="showBluetoothList">NEXMOVE</text>
						</view>
						<view v-else class="ble-txt unactive" @click="addBluetooth">
							<text>鞋子未绑定</text>
						</view>
						<view class="ble" :class="isConnectLeft?'ble-active':''">
							<image v-if="rssiLeft<-100" src="/static/images/RSSI/1.png" style="margin-right: 2rpx;">
							</image>
							<image v-if="rssiLeft<-84&&rssiLeft>-100" src="/static/images/RSSI/2.png"
								style="margin-right: 2rpx;">
							</image>
							<image v-if="rssiLeft<-69&&rssiLeft>-85" src="/static/images/RSSI/3.png"
								style="margin-right: 2rpx;">
							</image>
							<image v-if="rssiLeft<-54&&rssiLeft>-70" src="/static/images/RSSI/4.png"
								style="margin-right: 2rpx;">
							</image>
							<image v-if="rssiLeft>-51" src="/static/images/RSSI/5.png" style="margin-right: 2rpx;">
							</image>
							鞋子1
						</view>

						<view class="battery-content" style="margin-left: 10rpx;">
							<view class="battery">
								<view class="internal" :style="{width:battery1+'%'}"></view>
								<text>{{battery1+'%'}}</text>
							</view>
						</view>
						<view class="ble" :class="isConnectRight?'ble-active':''" style="margin-left: 25rpx;">
							<image v-if="rssiRight<-100" src="/static/images/RSSI/1.png" style="margin-right: 2rpx;">
							</image>
							<image v-if="rssiRight<-84&&rssiRight>-100" src="/static/images/RSSI/2.png"
								style="margin-right: 2rpx;">
							</image>
							<image v-if="rssiRight<-69&&rssiRight>-85" src="/static/images/RSSI/3.png"
								style="margin-right: 2rpx;">
							</image>
							<image v-if="rssiRight<-49&&rssiRight>-70" src="/static/images/RSSI/4.png"
								style="margin-right: 2rpx;">
							</image>
							<image v-if="rssiRight>-51" src="/static/images/RSSI/5.png" style="margin-right: 2rpx;">
							</image>鞋子2
						</view>
						<view class="battery-content" style="margin-left: 10rpx;">
							<view class="battery">
								<view class="internal" :style="{width:battery2+'%'}"></view>
								<text>{{battery2+'%'}}</text>
							</view>
						</view>
					</view>
					<view class="battery-content"></view>
				</view>
				<view>
					<view style="text-align: center;margin-top: 20rpx;">
						<image v-if="modeValue===1" src="/static/images/mode_needle.png"
							style="width: 300rpx;height: 300rpx;">
						</image>
						<image v-if="modeValue===2||modeValue===6" src="/static/images/mode1.png"
							style="width: 300rpx;height: 300rpx;">
						</image>
						<image v-if="modeValue===3" src="/static/images/mode_hit.png"
							style="width: 300rpx;height: 300rpx;">
						</image>
						<image v-if="modeValue===4" src="/static/images/mode_all.png"
							style="width: 300rpx;height: 300rpx;">
						</image>
						<image v-if="modeValue===5" src="/static/images/mode_clash.png"
							style="width: 300rpx;height: 300rpx;">
						</image>
					</view>

					<view class="mode-state-content" v-if="!isStart">
						<image mode src="/static/images/v2/massage.png"></image>
						<text class="content">
							<text>等待开始按摩</text>
						</text>
					</view>
					<view class="mode-state-content" v-else>
						<image mode src="/static/images/v2/massage.png"></image>
						<text class="content">
							<text @click="end">结束按摩</text>
						</text>
					</view>
					<view class="mode-content">
						<view class="mode" :class="modeValue===1?'mode-active':''" @click="mode(1)">
							针灸
						</view>
						<view class="mode" :class="modeValue===2?'mode-active':''" @click="mode(2)">
							按摩
						</view>
						<view class="mode" :class="modeValue===3?'mode-active':''" @click="mode(3)">
							捶打
						</view>
					</view>
					<view class="mode-content">
						<view class="mode" :class="modeValue===4?'mode-active':''" @click="mode(4)">
							推拿
						</view>
						<view class="mode" :class="modeValue===5?'mode-active':''" @click="mode(5)">
							刮痧
						</view>
						<view class="mode" :class="modeValue===6?'mode-active':''" @click="mode(6)">
							循环
						</view>
					</view>
				</view>

				<uni-card style="font-size: 40rpx;font-weight: bold;" title="力度" extra="共15档">
					<view style="display: flex;margin-top: 30rpx;">
						<view style="flex: 1;text-align: left;">
							<image src="/static/images/jianshao.png" style="width: 80rpx;height: 80rpx;"
								@click="jianshao">
							</image>
						</view>
						<view style="text-align: center;height: 80rpx;line-height: 80rpx;font-size: 80rpx;">
							{{dangweiValue}}
						</view>
						<view style="flex: 1;text-align: right;">
							<image src="/static/images/add.png" style="width: 80rpx;height: 80rpx;" @click="addDangwei">
							</image>
						</view>
					</view>
				</uni-card>
				<uni-card style="font-size: 40rpx;font-weight: bold;" title="时间" extra="分钟">
					<view style="text-align: center;">剩余:{{remainingTime}}秒</view>
					<view class="time-content" style="display: flex;margin-top: 30rpx;">
						<view style="flex: 1;text-align: center;padding: 10rpx;"
							:class="timeValue===10?'time-active':''" @click="time(10)">
							十分钟
						</view>
						<view style="flex: 1;text-align: center;padding: 10rpx;"
							:class="timeValue===15?'time-active':''" @click="time(15)">
							十五分钟
						</view>
						<view style="flex: 1;text-align: center;padding: 10rpx;"
							:class="timeValue===20?'time-active':''" @click="time(20)">
							二十分钟
						</view>
					</view>
				</uni-card>
			</view>
		</scroll-view>
		<uni-popup ref="addDevice" background-color="#fff">
			<view style="width: 700rpx;height: 700rpx;">
				<uni-card title="使用说明">
					<view>1、请打开手机蓝牙功能；</view>
					<view>2、请打开设备开关，保持开机状态；</view>
				</uni-card>
				<view v-if="bluetooth_list.length>0" v-for="(item,index) in bluetooth_list" :key="index">
					<uni-card v-if="item.name.indexOf('SCZN')>-1" @click="addDeviceData(item)">
						<view style="display: flex;height: 55rpx;line-height: 55rpx">
							<view><text style="font-size: 30rpx;">设备号:{{ item.name }}</text></view>
							<view style="flex: 1;text-align: right;margin-left: 5rpx;"><button size="mini"
									type="primary">绑定</button>
							</view>
						</view>
					</uni-card>
				</view>
				<view v-else style="text-align: center;">
					<uni-card>
						<text>没有可用蓝牙设备，请检查蓝牙是否开启?</text>
					</uni-card>
				</view>
				<view style="margin-top: 30rpx;">
					<button type="default" @click="closeAddDevice">关闭</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="removeDevice" background-color="#fff">
			<view style="width: 700rpx;height: 700rpx;">
				<view v-if="list.length>0" v-for="(item,index) in list" :key="index">
					<uni-card>
						<view>
							<view>
								<text style="font-size: 30rpx;">设备号:{{ item.name }}</text>
							</view>
						</view>
					</uni-card>
				</view>
				<view style="margin-top: 30rpx;">
					<!-- <view style="text-align: right;margin-top: 30rpx;"><button size="mini"
							@click="removeBluetooth(item._id)">解绑</button></view> -->
					<button type="default" @click="removeBluetooth(open_id)">解绑</button>
					<button style=" margin-top: 20rpx;" type="default" @click="closeBluetoothList">关闭</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const mini_cz_obj = uniCloud.importObject('wmz-cz-mini')
	import {
		Blue
	} from '@/utils/index.js'
	import {
		ConnectController
	} from '@/utils/controller.js'
	let remainingTimeInterval
	export default {
		data() {
			return {
				rssiLeft: -49,
				rssiRight: -49,
				open_id: '',
				bluetooth_list: [],
				isConnect: false,
				isConnectLeft: false,
				isConnectRight: false,
				isCreateBLEConnection: false,
				isInit: false,
				list: [],
				modeValue: 1,
				battery1: 0,
				battery2: 0,
				isStart: false,
				timeValue: 10,
				remainingTime: 600,
				dangweiValue: 0,
				deviceModel: ""
			}
		},
		onLoad() {
			let _this = this
			_this.isInit = false
			_this.deviceModel = uni.getSystemInfoSync().deviceModel
			_this.openBluetoothAdapter()
		},
		onShow() {
			 
		},
		methods: {
			openBluetoothAdapter() {
				let _this = this
				uni.openBluetoothAdapter({
					success(res) {
						_this.isInit = true
						if (_this.isInit) {
							_this.open_id = uni.getStorageSync('wmz-nexmove-cz-open-id')
							if (!_this.open_id) {
								uni.login({
									provider: 'weixin',
									onlyAuthorize: true,
									success(res) {
										if (res && res.code) {
											_this.authCode = res.code;
											_this.getBluetooth()
										} else {
											this.$api.msg('获取微信授权码失败');
										}
									}
								});
							} else {
								_this.getBluetooth()
							}
							uni.onBLEConnectionStateChange(function(res) {
								console.log("res.connected")
								console.log(res.connected)
								if (_this.list.length > 0) {
									if (res.deviceId === _this.list[0].device_id) {
										if (res.connected) {
											let deviceId = res.deviceId
											_this.isConnectLeft = true
											if (_this.deviceModel.indexOf("iphone") > -1) {
												setTimeout(() => {
													_this.getBLEDeviceServices(_this.list[0])
												}, 1000);
											} else {
												_this.getBLEDeviceServicesSuccess(_this.list[0])
											}
										} else {
											_this.isConnectLeft = false
											_this.createBLEConnection(_this.list[0])
										}
									}
									if (res.deviceId === _this.list[1].device_id) {
										if (res.connected) {
											let deviceId = res.deviceId
											_this.isConnectRight = true
											if (_this.deviceModel.indexOf("iphone") > -1) {
												setTimeout(() => {
													_this.getBLEDeviceServices(_this.list[1])
												}, 1000);
											} else {
												_this.getBLEDeviceServicesSuccess(_this.list[1])
											}
										} else {
											_this.isConnectRight = false
											_this.createBLEConnection(_this.list[1])
										}
									}
									// 该方法回调中可以用于处理连接意外断开等异常情况
									console.log(
										`device ${res.deviceId} state has changed, connected: ${res.connected}`
									)
								}
							})
						}
					},
					fail: (err) => {
						console.log(err)
						uni.showModal({
							title: '提示',
							content: '1.确保设备打开且已通电;2开始手机系统定位及蓝牙开关;开始APP的定位、蓝牙开关权限;4个别手机需要开启APP附近设备',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									_this.openBluetoothAdapter()
								}
							}
						});
					}
				})
			},
			async getBluetooth() {
				let _this = this
				let getBluetoothRes = await mini_cz_obj.getBluetooth({
					authCode: this.authCode,
					open_id: this.open_id
				})
				if (getBluetoothRes.code === 200) {
					this.list = getBluetoothRes.data.data
					console.log(this.list)
					let list = this.list
					_this.open_id = getBluetoothRes.data.open_id
					uni.setStorageSync('wmz-nexmove-cz-open-id', _this.open_id)
					if (list.length > 0) {
						this.isConnect = true
						for (var i in list) {
							this.createBLEConnection(list[i])
						}
					}
				}
			},
			createBLEConnection(item) {
				console.log('开始连接')
				uni.showLoading({
					title: '连接中,请动动脚开机或检查是否有电'
				})
				let _this = this
				uni.createBLEConnection({
					deviceId: item.device_id,
					async success(e) {
						console.log('连接成功')
						if (item.device_id === _this.list[0].device_id) {
							_this.isConnectLeft = true
						} else {
							_this.isConnectRight = true
						}
						uni.hideLoading()
					},
					async fail(e) {
						console.log(e)
						uni.hideLoading()
						if (e.errMsg === 'createBLEConnection:fail:already connect') {
							console.log('已经连接')
							_this.isConnectLeft = true
							_this.isConnectRight = true
							uni.hideLoading()
						} else {
							let list = _this.list
							for (var i in list) {
								_this.createBLEConnection(list[i])
							}
						}
					}
				})
			},
			closeBLEConnection() {
				let _this = this
				let list = this.list
				for (var i in list) {
					uni.closeBLEConnection({
						deviceId: list[i].device_id,
						success: () => {
							uni.showToast({
								icon: 'none',
								title: '已断开连接'
							})
						},
						fail: (e) => {
							if (!item.service_id || !item.characteristic_id) {
								uni.showModal({
									title: '提示',
									content: '断开连接失败,请点击重试',
									confirmText: '重试',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											_this.closeBLEConnection()
										}
									}
								});
								return
							}
							console.log(e)
						},
					})
				}
				_this.list = []
			},
			addBluetooth() {
				Blue.start()
				ConnectController.addConnectStateListen(data => {
					if (data.deviceId) {
						this.connectDeviceId = data.deviceId
					}
				})
				ConnectController.addDevicesListen(device => {
					const index = this.bluetooth_list.findIndex(item => item.name === device.name)
					if (index < 0) {
						this.bluetooth_list.push(device)
					} else {
						if (this.bluetooth_list[0].deviceId !== device.deviceId) {
							this.bluetooth_list[index].cdevice = device
						}
					}
				})
				this.$refs.addDevice.open()
			},
			closeAddDevice() {
				Blue.closeBlue()
				this.$refs.addDevice.close()
			},
			async addDeviceData(item) {
				console.log(item)
				if (!item.cdevice) {
					uni.showToast({
						title: '请动动脚开机或检查是否有电',
						icon: 'error'
					})
					return
				}
				const addBluetoothRes = await mini_cz_obj.addBluetooth({
					device_id: item.deviceId,
					name: item.name,
					item: item.cdevice,
					open_id: uni.getStorageSync('wmz-nexmove-cz-open-id')
				})
				if (addBluetoothRes.code === 200) {
					uni.showToast({
						title: '绑定成功!',
						icon: 'success'
					})
					this.closeAddDevice()
					this.isInit = false
					this.openBluetoothAdapter()
				} else {
					uni.showToast({
						title: addBluetoothRes.msg,
						icon: 'error'
					})
					this.closeAddDevice()
				}
			},
			showBluetoothList() {
				this.$refs.removeDevice.open()
			},
			closeBluetoothList() {
				this.$refs.removeDevice.close()
			},
			async removeBluetooth(id) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认解绑？',
					showCancel: true,
					async success(res) {
						if (res.confirm) {
							let removeBluetoothRes = await mini_cz_obj.removeBluetooth({
								id: id
							})
							if (removeBluetoothRes.code === 200) {
								uni.showToast({
									title: '解绑成功!',
									icon: 'success'
								})
								_this.isConnect = false
								_this.isCreateBLEConnection = false
								_this.isConnectLeft = false
								_this.isConnectRight = false
								_this.dangweiValue = 0
								_this.rssiLeft = -49
								_this.rssiRight = -49
								_this.battery1 = 0
								_this.battery2 = 0
								_this.closeBluetoothList()
								_this.closeBLEConnection()
							}
						}
					}
				})
			},
			async getBLEDeviceServices(item) {
				console.log('getBLEDeviceServices')
				let _this = this
				let deviceId = item.device_id
				uni.getBLEDeviceServices({
					deviceId,
					success(bLEDeviceServicesRes) {
						let serviceId = bLEDeviceServicesRes.services[1].uuid
						uni.getBLEDeviceCharacteristics({
							// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
							deviceId,
							// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
							serviceId,
							success(res) {
								_this.getBLEDeviceServicesSuccess(item)
							}
						})
					}
				})
			},
			getBLEDeviceServicesSuccess(item) {
				this.notifyBLECharacteristicValueChange(item)
				this.writeBLECharacteristicValue(item)
			},
			//结束
			async end() {
				this.dangwei(0)
				clearInterval(remainingTimeInterval)
				remainingTimeInterval = ''
				uni.showToast({
					title: '按摩已结束!',
					icon: 'none'
				})
			},
			//模式
			async mode(valueStr) {
				this.modeValue = valueStr
				this.dangweiValue = 0
				let list = this.list
				for (var i in list) {
					this.writeBLECharacteristicValue(list[i], valueStr)
				}
			},
			//时间
			async time(valueStr) {
				this.timeValue = valueStr
				this.remainingTime = this.timeValue * 60
				let list = this.list
				for (var i in list) {
					this.writeBLECharacteristicValue(list[i], valueStr)
				}
			},
			//档位
			async dangwei(valueStr) {
				let list = this.list
				if (list.length < 1) {
					uni.showToast({
						title: '鞋子未绑定!',
						icon: 'none'
					})
					this.dangweiValue = 0
					this.addBluetooth()
					return
				}
				this.dangweiValue = valueStr
				for (var i in list) {
					this.writeBLECharacteristicValue(list[i], valueStr)
				}
			},
			//写数据
			async writeBLECharacteristicValue(item) {
				let _this = this
				var value = new ArrayBuffer(10),
					n = new DataView(value);
				n.setUint8(0, 255)
				n.setUint8(1, 1)
				n.setUint8(2, this.modeValue)
				n.setUint8(3, this.timeValue)
				n.setUint8(4, 0)
				n.setUint8(5, this.dangweiValue)
				n.setUint8(9, 85)
				console.log("发送数据")
				console.log(item.device_id)
				console.log(item.service_id)
				console.log(item.characteristic_id)
				console.log(this.u(value))
				let res = await uni.writeBLECharacteristicValue({
					deviceId: item.device_id,
					serviceId: item.service_id,
					characteristicId: item.characteristic_id,
					value: value,
					success(res) {
						console.log(res)
						if (res.errCode !== 0) {
							this.createBLEConnection()
						}
					},
					fail(e) {
						console.log(e)
					}
				})
			},
			//读数据
			async readBLECharacteristicValue(item, valueStr) {
				let _this = this
				let list = this.list
				for (var i in list) {
					let deviceId = list[i].device_id
					let serviceId = list[i].service_id
					let characteristicId = list[i].characteristic_id
					let res = await uni.readBLECharacteristicValue({
						deviceId: deviceId,
						serviceId: serviceId,
						characteristicId: characteristicId
					})
				}
			},
			u(e) {
				return Array.prototype.map.call(new Uint8Array(e), (function(e) {
					return ("00" + e.toString(16)).slice(-2)
				})).join("")
			},
			M(e) {
				for (var r = [], t = 0; t < e.length / 2; t++) r.push(parseInt(e.substr(2 * t, 2), 16));
				return r
			},
			async notifyBLECharacteristicValueChange(item) {
				let _this = this
				let deviceId = item.device_id
				console.log(deviceId)
				let serviceId = item.service_id
				console.log(serviceId)
				let notify_characteristicId = item.notify_characteristicId
				console.log(notify_characteristicId)
				uni.notifyBLECharacteristicValueChange({
					deviceId: deviceId,
					serviceId: serviceId,
					characteristicId: notify_characteristicId,
					state: true,
					success: () => {
						// 监听特征值变化
						uni.onBLECharacteristicValueChange((result) => {
							let deviceId = result.deviceId
							uni.getBLEDeviceRSSI({
								deviceId,
								success(res) {
									if (_this.list.length > 0) {
										if (deviceId === _this.list[0].device_id) {
											_this.rssiLeft = res.RSSI
										}
										if (deviceId === _this.list[1].device_id) {
											_this.rssiRight = res.RSSI
										}
									}
								},
								fail: (e) => {
									console.log(e)
								}
							})
							const hexData = this.ab2hex(result.value);
							if (hexData.indexOf('ff50') > -1) {
								if (_this.list.length > 0) {
									//电量
									if (deviceId === _this.list[0].device_id) {
										_this.battery1 = parseInt(hexData.split('ff50')[1].substr(
											0, 2), 16)
									}
									if (deviceId === _this.list[1].device_id) {
										_this.battery2 = parseInt(hexData.split('ff50')[1].substr(
											0, 2), 16)
									}
								}
							}

						});
					},
					fail: (err) => {
						console.log(err)
					},
				});
			},
			timeRangeChange(e) {
				this.time(e) //时间
			},
			addDangwei() {
				let _this = this
				this.isStart = true
				if (!remainingTimeInterval) {
					remainingTimeInterval = setInterval(function() {
						if (_this.dangweiValue > 0) {
							_this.remainingTime = _this.remainingTime - 1
							console.log(_this.remainingTime)
							if (_this.remainingTime === 0) {
								_this.end()
							}
						}
					}, 1000)
				}
				if (this.dangweiValue < 15) {
					this.dangweiValue = this.dangweiValue * 1 + 1
					this.dangwei(this.dangweiValue) //档位
				} else {
					this.dangweiValue = 15
					this.dangwei(this.dangweiValue) //档位
				}
			},
			jianshao() {
				if (this.dangweiValue > 0) {
					this.dangweiValue = this.dangweiValue - 1
					this.dangwei(this.dangweiValue) //档位
				} else {
					this.isStart = false
					this.dangweiValue = 0
					this.dangwei(this.dangweiValue) //档位
				}
			},
			goBack() {
				// this.end('55aa00') //结束
				uni.navigateBack()
			},
			ab2hex(buffer) {
				const hexArr = Array.prototype.map.call(
					new Uint8Array(buffer),
					function(bit) {
						return ('00' + bit.toString(16)).slice(-2)
					}
				)
				return hexArr.join('')
			}
		},

	}
</script>

<style>
	.container {
		-webkit-align-items: center;
		align-items: center;
		background: linear-gradient(180deg, rgba(1, 122, 221, .6), rgba(1, 122, 221, .1));
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		width: 100vw
	}

	.top-info {
		-webkit-justify-content: space-between;
		justify-content: space-between
	}

	.top-info,
	.container .content .top-info .top-left {
		-webkit-align-items: center;
		align-items: center;
		display: -webkit-flex;
		display: flex
	}

	.top-info .top-left {
		z-index: 19999
	}

	.top-info .top-left .ble-txt {
		-webkit-align-items: center;
		align-items: center;
		border-radius: 22rpx;
		color: #fff;
		display: -webkit-flex;
		display: flex;
		font-size: 26rpx;
		-webkit-justify-content: center;
		justify-content: center;
		padding: 18rpx 24rpx
	}

	.top-info .top-left .ble-txt image {
		height: 38rpx;
		margin-right: 12rpx;
		width: 38rpx
	}

	.top-info .top-left .active {
		background: #0f86dd
	}

	.top-info .top-left .unactive {
		background: #9b9b9b
	}

	.top-info .top-left .ble {
		-webkit-align-items: center;
		align-items: center;
		background: #fff;
		border-radius: 14rpx;
		color: #0f86dd;
		display: -webkit-flex;
		display: flex;
		font-size: 24rpx;
		-webkit-justify-content: center;
		justify-content: center;
		margin-left: 14rpx;
		padding: 12rpx
	}

	.top-info .top-left .ble image {
		height: 41rpx;
		width: 47rpx
	}

	.top-info .top-left .ble-active {
		background: #0f86dd;
		color: #fff
	}

	.battery-content {
		color: #1d1f38;
		font-size: 28rpx;
		width: 80rpx
	}

	.battery {
		border: 4rpx solid #fff;
		border-radius: 14rpx;
		color: #fff;
		height: 48rpx;
		position: relative;
		width: 90rpx;
	}

	.battery,
	.battery .internal {
		-webkit-align-items: center;
		align-items: center;
		display: -webkit-flex;
		display: flex
	}

	.battery .internal {
		background: #0f86dd;
		border-radius: 10rpx;
		height: 34rpx;
		-webkit-justify-content: center;
		justify-content: center;
		left: 6rpx;
		position: absolute;
		width: 64rpx
	}

	.battery text {
		font-size: 22rpx;
		left: 50%;
		position: absolute;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%)
	}

	.battery:before {
		background: #fff;
		border-bottom-right-radius: 8rpx;
		border-top-right-radius: 8rpx;
		content: "";
		display: inline-block;
		height: 18rpx;
		position: relative;
		right: -80rpx;
		top: 0rpx;
		width: 12rpx;
		z-index: 999
	}

	.mode-state-content {
		-webkit-align-items: center;
		align-items: center;
		background: #fff;
		border-radius: 40rpx;
		color: #0f87de;
		display: -webkit-flex;
		display: flex;
		font-size: 26rpx;
		-webkit-justify-content: center;
		justify-content: center;
		margin: 0 auto;
		max-width: 340rpx;
		padding: 10rpx 20rpx
	}

	.mode-state-content image {
		height: 45rpx;
		width: 45rpx
	}

	.time-content {
		-webkit-align-items: center;
		align-items: center;
		background: #f6f6f6;
		border-radius: 50rpx;
		display: -webkit-flex;
		display: flex;
		height: 82rpx;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding: 8rpx 16rpx
	}

	.time-active {
		background: #0f86dd;
		border-radius: 40rpx;
		color: #fff
	}

	.mode-content {
		color: #fff;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: center;
		justify-content: center;
		padding: 20rpx 40rpx
	}

	.mode-content .mode {
		background: #fff;
		border-radius: 20rpx;
		color: rgba(0, 0, 0, .5);
		margin: 10rpx 28rpx;
		padding: 18rpx 40rpx
	}

	.mode-content .mode-active {
		background: #0f86dd;
		color: #fff
	}
</style>